<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="assets/css/bootstrap1.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link href="assets/css/codemirror.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/ace.min.css"/>
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"/>
    <script src="assets/js/jquery.min.js"></script>
    <script type="text/javascript">
        window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>" + "<" + "/script>");
    </script>
    <script type="text/javascript">
        if ("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
    </script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/typeahead-bs2.min.js"></script>
    <!--		<script src="assets/js/jquery.dataTables.min.js"></script>-->
    <!--		<script src="assets/js/jquery.dataTables.bootstrap.js"></script>-->
    <script type="text/javascript" src="js/H-ui.js"></script>
    <script type="text/javascript" src="js/H-ui.admin.js"></script>
    <script src="assets/layer/layer.js" type="text/javascript"></script>
    <script src="assets/laydate/laydate.js" type="text/javascript"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <title>维修人员管理</title>
</head>

<body>

<div id="app" class="page-content clearfix">
    <div id="Member_Ratings">
        <div class="d_Confirm_Order_style">

            <!--------------------------人员搜索----------------------->

            <div class="search_style">
                <div class="title_names">搜索查询</div>
                <ul class="search_content clearfix">
                    <li><label class="l_f">人员搜索</label><input name="" type="text" class="text_add" placeholder="请输入"
                                                              style=" width:400px"/></li>
                    <li><label class="l_f">添加时间</label><input class="inline laydate-icon" id="start"
                                                              style=" margin-left:10px;"></li>
                    <li style="width:90px;">
                        <button type="button" class="btn_search" ><i
                                class="icon-search"></i>查询
                        </button>
                    </li>
                    <li>
                        每页显示行数：
                        <select @change="initData(1)" v-model="pageSize">
                            <option v-for="size in sizes">{{size}}</option>
                        </select>
                    </li>
                </ul>
            </div>
            <!----------------------------------------------------------------->
            <div class="border clearfix">
       <span class="l_f">
           <a href="javascript:void(0)" id="member_add" class="btn btn-warning" @click="addWorker"><i
                   class="icon-plus"></i>添加员工</a>
        <a href="javascript:ovid()" class="btn btn-danger" @click="deleteList"><i class="icon-trash"></i>批量禁用</a>
       </span>
                <span class="r_f">共：<b>{{pageInf.total}}</b>条</span>
            </div>
            <!-----------------------------人员显示信息------------------------------------>
            <div class="table_menu_list">
                <table class="table table-striped table-bordered table-hover" id="sample-table">
                    <thead>
                    <tr>
                        <th width="25"><label><input v-model="chooseAll" type="checkbox" class="ace"><span class="lbl"></span></label></th>
                        <th width="80">工号</th>
                        <th width="100">姓名</th>
                        <th width="80">评分</th>
                        <th width="120">手机</th>
                        <th width="">居住地址</th>
                        <th width="">抢单数量</th>
                        <th width="">派单数量</th>
                        <th width="">退单数量</th>
                        <th width="">维修次数</th>
                        <th width="120">单次维修时长/分钟（平均）</th>
                        <th width="120">入职时间</th>
                        <th width="100">等级</th>
                        <th width="70">状态</th>
                        <th width="250">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-------------------------循环人员显示---开始------------------------------------->
                    <tr v-for="worker,index in workersInf">
                        <th width="25"><label><input :value="worker.id" v-model="chooseWorker" type="checkbox" class="ace"><span class="lbl"></span></label></th>
                        <th width="80">{{worker.id}}</th>
                        <th width="100">{{worker.workerName}}</th>
                        <th width="80">{{worker.totalScore/worker.pointsNumber}}</th>
                        <th width="120">{{worker.phone}}</th>
                        <th width="200">{{worker.address}}</th>
                        <th width="">{{worker.grabOrdersNumber}}</th>
                        <th width="">{{worker.ordersNumber}}</th>
                        <th width="">{{worker.refundsNumber}}</th>
                        <th width="">{{worker.repairsNumber}}</th>
                        <th width="">{{Math.ceil(worker.repairTime/worker.repairsNumber)}}</th>
                        <th width="120">{{worker.joinTime.substring(0,10)}}</th>
                        <th width="50">工人</th>
                        <td class="td-status"><span class="label label-success radius">已启用</span></td>

                        <td class="td-manage">
                            <a onClick="member_stop(this,'10001')" href="javascript:;" @click="deleteWorker(worker.id)" title="停用"
                               class="btn btn-xs btn-success">
                                <i class="icon-ok bigger-120"></i></a>
                            <a title="查看头像" href="javascript:;" class="btn btn-xs btn-warning">
                                <i class="icon-upload  bigger-120"></i></a>
                            <a title="编辑" onclick="member_edit('550')" @click="updateWorker(index)" href="javascript:;"
                               class="btn btn-xs btn-info">
                                <i class="icon-edit bigger-120"></i></a>
                        </td>
                    </tr>
                    <!-------------------------循环人员显示---结束------------------------------------->
                    </tbody>
                </table>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="dataTables_info" id="sample-table_info" role="status" aria-live="polite">
                        第{{pageInf.pageNum}}/{{pageInf.pages}} 页，共 {{pageInf.total}} 条
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="dataTables_paginate paging_bootstrap" id="sample-table_paginate">
                        <ul class="pagination">
                            <li :class="{'disabled':pageInf.pageNum==1}">
                                <a href="#" @click="initData(pageInf.prePage)">上一页</a>
                            </li>

                            <li v-for="i in pageInf.pages" @click.prevent="initData(i)"
                                :class="{'active':pageInf.pageNum==i}">
                                <a href="#"> {{i}}</a>
                            </li>

                            <li :class="{'disabled':pageInf.pageNum==pageInf.pages}">
                                <a href="#" @click="initData(pageInf.nextPage)">下一页</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Form -->
    <!---------------------------------添加用户图层----------------------->
    <el-dialog title="添加员工" :visible.sync="dialogFormVisible">
        <el-form :model="curWorker">
            <el-form-item label="头像上传：" :label-width="formLabelWidth">
            <div>
                <el-upload
                        class="upload-demo"
                        action="#"
                        :on-change="handleChange"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"

                        multiple
                        :limit="1"
                        :on-exceed="handleExceed"
                        :headers="headers"
                        :auto-upload="false"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div>
            </el-form-item>
            <el-form-item label="真实姓名：" :label-width="formLabelWidth">
                <el-input v-model="curWorker.workerName" ref="workerName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话：" :label-width="formLabelWidth">
                <el-input v-model="curWorker.phone" ref="phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="居住地址：" :label-width="formLabelWidth">
                <el-select v-model="curWorker.provence" placeholder="山东省" disabled>
                </el-select>
                <el-select v-model="curWorker.city" placeholder="青岛市" disabled>
                </el-select>
                <el-select v-model="curWorker.district" placeholder="请选择" >
                    <el-option label="市南区" value=""></el-option>
                    <el-option label="市北区" value="beijing"></el-option>
                    <el-option label="崂山区" value="beijing"></el-option>
                    <el-option label="李沧区" value="beijing"></el-option>
                    <el-option label="城阳区" value="beijing"></el-option>
                    <el-option label="黄岛区" value="beijing"></el-option>
                    <el-option label="即墨区" value="beijing"></el-option>
                    <el-option label="胶州市" value="beijing"></el-option>
                    <el-option label="平度市" value="beijing"></el-option>
                    <el-option label="莱西市" value="beijing"></el-option>

                </el-select>
                <el-input v-model="curWorker.address" ref="address" autocomplete="off" placeholder="请输入详细地址"></el-input>
            </el-form-item>

            <el-form-item label="所属辖区" :label-width="formLabelWidth">
                <el-select v-model="curWorker.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveWorker">确 定</el-button>
        </div>
    </el-dialog>
</div>


</body>
</html>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            chooseAll:false,
            pageInf: {
            },
            choosePage:[],
            workersInf: [],
            pageSize: 10,
            sizes: [3, 5, 10, 15, 20, 25, 30],
            imgdata: '',
            dialogFormVisible: false,//是否显示弹窗
            curWorker: {//弹窗里对应的数据
                workerName: '',
                phone: '',
                address: '',
                region: '',
                province:'',
                city:'',
                district:'',
                districts:[],
            },
            addWorkerInfo:{
                cityId:'144',
                workerName:'',
                pass:'123456',
                phone:'',
                address:'',
            },
            headers:{'Content-Type': 'multipart/form-data'},
            fileList: [],//上传文件列表
            formLabelWidth: '120px',
            chooseWorker:[],
            jurisdiction:[],

        },
        created: function () {
            this.initData(1);
        },
        watch:{
            //监听全选框的变化
            chooseAll:function () {
                if (this.chooseAll){
                    var flag=true;
                    this.choosePage.forEach(page=>{
                        if (this.pageInf.pageNum==page){
                            flag=false;
                        }
                    });
                    if (flag){
                        this.choosePage.push(this.pageInf.pageNum);
                        this.workersInf.forEach(worker=>{
                            this.chooseWorker.push(worker.id)
                        });
                    }

                }
                else {
                    //获得此页在choose Page中的下标
                    var index=0;
                    var flag=false;
                    var  i=0;
                    this.choosePage.forEach(page=>{

                        if (this.pageInf.pageNum==page){
                            i=index;
                            //将该页码从此数组中删除
                            this.choosePage.splice(index,1);
                            flag=true;
                            console.log("下标"+i);
                        }
                        index++;
                    });
                    if (flag){
                        //清除此页的复选框
                        this.chooseWorker.splice(i*this.pageSize,this.pageSize);
                    }

                }
            }
        },
        methods: {
            //获得所有的员工信息
            initData(pageNum) {
                console.log(pageNum);
                axios.get("http://localhost:8080/manage/showWorkersList?pageNum=" + pageNum + "&pageSize=" + this.pageSize).then(
                    res => {
                        this.pageInf = res.data.data;
                        this.workersInf = res.data.data.list;
                        console.log(this.workersInf);
                        //判断该页是否被全选
                        if(this.choosePage.length!=0){
                            var flag=false;
                            this.choosePage.forEach(page=>{
                                if (page==this.pageInf.pageNum){
                                    flag=true;
                                }
                            });
                            this.chooseAll=flag;
                            console.log(this.chooseAll);
                        }
                    });
                //获得区县
                axios.get("http://localhost:8080/manage/showDistrictList?cityId=144").then(res=>{
                    this.curWorker.districts=res.data.data;
                    console.log(this.curWorker.districts);
                });
                },
            //添加员工
            addWorker() {
                //清空curWorker
                this.curWorker = {};
                this.dialogFormVisible = true;
            },
            //修改员工信息
            updataWorker(index) {
                //将数组workerInf下标为index的元素赋值给curWorker
                this.curWorker = this.workersInf(index);
            },
            //保存信息
            saveWorker() {
                //创建一个FormData对象
                var formData = new FormData();
                //将上传的文件添加到formdata中
                if (this.fileList.length!=0){
                    formData.append('file', this.fileList[0].raw);
                }
                console.log(this.curWorker);
                var te = /^[\u4e00-\u9fa5_a-zA-Z0-9]{2,100}$/;
                var te1=/^[0-9]{11}$/;
                if (this.curWorker.workerName == undefined || this.curWorker.workerName == "") {
                    this.open("员工姓名不能为空");
                    this.$refs.workerName.focus();
                    return;
                } else if (!te.test(this.curWorker.workerName)) {
                    this.open("请输入两位以上的汉字");
                    this.$refs.workerName.focus();
                    return;
                }
                if (this.curWorker.phone==undefined||this.curWorker.phone==""){
                    this.open("员工电话不能为空");
                    this.$refs.phone.focus();
                    return;
                }
                else if(!te1.test(this.curWorker.phone)){
                    this.open("请输入11位的手机号");
                    this.$refs.phone.focus();
                    return;
                }
                if (this.curWorker.address==undefined||this.curWorker.address==""){
                    this.open("员工住址不能为空");
                    this.$refs.address.focus();
                    return;
                }
                //将form表单的数据存放到addWorkerInfo
                this.addWorkerInfo.cityId=this.curWorker.cityId;
                this.addWorkerInfo.workerName=this.curWorker.workerName;
                this.addWorkerInfo.phone=this.curWorker.phone;
                this.addWorkerInfo.pass=this.curWorker.pass;
                this.addWorkerInfo.address=this.curWorker.address;
                axios.post("http://localhost:8080/manage/uploadWorkerPicture",formData,{
                    headers: {
                        //指定文件类型
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res=>{
                    console.log(res.data.data)
                    this.addWorkerInfo.profile=res.data.data;
                });
                axios.post("http://localhost:8080/manage/addWorker",this.addWorkerInfo).then(res=>{
                    this.open("添加成功")
                });
                this.dialogFormVisible = false;
                this.initData(1);

            },
            //删除员工
            deleteWorker(id) {
                axios.get("http://localhost:8080/manage/delete?id="+id).then(
                    res=>{
                        console.log(res.data.message);
                    }
                );
            },
            //批量删除
            deleteList(){
                var workers='';
                this.chooseWorker.forEach(worker=>{
                   workers=workers+","+worker;
                });
            },
            //提示框
            open(title) {
                this.$alert(title, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `提示信息: `+title
                        });
                    }
                });
            },

            //点击显示图片

            //图片上传相关方法
            //图片改变时调用
            handleChange(file,fileList){
              this.fileList=fileList;
            },
            //图片移除时调用
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            //
            handlePreview(file) {
                console.log(file);
            },
            //出现异常时调用
            handleExceed(files, fileList) {
                this.$message.warning(`只能选择1个图片作为头像，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            }

        }
    })
</script>

<script>
    jQuery(function ($) {
        // var oTable1 = $('#sample-table').dataTable({
        //     "aaSorting": [[1, "desc"]],//默认第几个排序
        //     "bStateSave": true,//状态保存
        //     "aoColumnDefs": [
        //         //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
        //         {"orderable": false, "aTargets": [0, 8, 9]}// 制定列不参与排序
        //     ]
        // });


        $('table th input:checkbox').on('click', function () {
            var that = this;
            $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

        });


        $('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});

        function tooltip_placement(context, source) {
            var $source = $(source);
            var $parent = $source.closest('table')
            var off1 = $parent.offset();
            var w1 = $parent.width();

            var off2 = $source.offset();
            var w2 = $source.width();

            if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
            return 'left';
        }
    });
    /*用户-添加*/
    // $('#member_add').on('click', function () {
    //     layer.open({
    //         type: 1,
    //         title: '添加用户',
    //         maxmin: true,
    //         shadeClose: true, //点击遮罩关闭层
    //         area: ['800px', ''],
    //         content: $('#add_menber_style'),
    //         btn: ['提交', '取消'],
    //         yes: function (index, layero) {
    //             var num = 0;
    //             var str = "";
    //             $(".add_menber input[type$='text']").each(function (n) {
    //                 if ($(this).val() == "") {
    //
    //                     layer.alert(str += "" + $(this).attr("name") + "不能为空！\r\n", {
    //                         title: '提示框',
    //                         icon: 0,
    //                     });
    //                     num++;
    //                     return false;
    //                 }
    //             });
    //             if (num > 0) {
    //                 return false;
    //             } else {
    //                 layer.alert('添加成功！', {
    //                     title: '提示框',
    //                     icon: 1,
    //                 });
    //                 layer.close(index);
    //             }
    //         }
    //     });
    // });

    /*用户-查看*/
    function member_show(title, url, id, w, h) {
        layer_show(title, url + '#?=' + id, w, h);
    }

    /*用户-停用*/
    function member_stop(obj, id) {
        layer.confirm('确认要停用吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs " onClick="member_start(this,id)" href="javascript:;" title="启用"><i class="icon-ok bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
            $(obj).remove();
            layer.msg('已停用!', {icon: 5, time: 1000});
        });
    }

    /*用户-启用*/
    function member_start(obj, id) {
        layer.confirm('确认要启用吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="btn btn-xs btn-success" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="icon-ok bigger-120"></i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
            $(obj).remove();
            layer.msg('已启用!', {icon: 6, time: 1000});
        });
    }

    /*用户-编辑*/
    // function member_edit(id) {
    //     layer.open({
    //         type: 1,
    //         title: '修改用户信息',
    //         maxmin: true,
    //         shadeClose: false, //点击遮罩关闭层
    //         area: ['800px', ''],
    //         content: $('#add_menber_style'),
    //         btn: ['提交', '取消'],
    //         yes: function (index, layero) {
    //             var num = 0;
    //             var str = "";
    //             $(".add_menber input[type$='text']").each(function (n) {
    //                 if ($(this).val() == "") {
    //
    //                     layer.alert(str += "" + $(this).attr("name") + "不能为空！\r\n", {
    //                         title: '提示框',
    //                         icon: 0,
    //                     });
    //                     num++;
    //                     return false;
    //                 }
    //             });
    //             if (num > 0) {
    //                 return false;
    //             } else {
    //                 layer.alert('添加成功！', {
    //                     title: '提示框',
    //                     icon: 1,
    //                 });
    //                 layer.close(index);
    //             }
    //         }
    //     });
    // }

    /*用户-删除*/
    function member_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }

    laydate({
        elem: '#start',
        event: 'focus'
    });

</script>